<template>
  <div class="page">
    <headNav @headBack="book_reutrn_go" centerTitle=" 订单"></headNav>
    <div class="title1 fix" @click="detailShow = true">
      <div class="left">
        <div class="titleDate"><span class="icons-qu">去</span>&nbsp;<span>{{toMonth}}-{{toDay}}&nbsp;{{toWeek}}</span>&nbsp;<span>{{toStartTime}}</span>
        </div>
        <div class="titleT fix"><span>{{toDetailDto.fromAirportName}}-{{toDetailDto.toAirportName}}</span></div>

        <div class="titleDate"><span
          class="icons-qu">返</span>&nbsp;<span>{{backMonth}}-{{backDay}}&nbsp;{{backWeek}}</span>&nbsp;<span>{{backStartTime}}</span>
        </div>
        <div class="titleT fix"><span>{{backDetailDto.fromAirportName}}-{{backDetailDto.toAirportName}}</span></div>
      </div>
      <div class="right fix"><i class="iconfont icon-enter"></i></div>
    </div>
    <!--飞机详情-->
    <mt-popup v-model="detailShow" position="bottom" class="changePop2">
      <div class="outward">
        <div class="L">
          <span class="icons-qu go">去</span>
          <span class="qu-type">{{toDetailDto.fromAirportName}}</span>
          <span>{{ toMonth}}月{{toDay}}日</span>
        </div>
        <div class="M fix">
          <div class="M1 fix">
            <p class="M1GoDate">{{toStartTime}}</p>
            <p class="M1LineMiddle"></p>
            <p class="M1BackDate">{{toArriveTime}}</p>
          </div>
          <div class="M2 fix">
            <p class="M2GoCity">
              {{toDetailDto.fromAirportName}}
            </p>
            <p class="flightDuration">
              {{toDetailDto.flightDuration.split(':')[0]}}小时{{toDetailDto.flightDuration.split(':')[1]}}分钟
            </p>
            <p class="M2BackCity">
              {{toDetailDto.toAirportName}}
            </p>
          </div>
          <div class="M3 fix">
            <p class="M3GoType">
              {{toDetailDto.carrier.nameShort}}{{toDetailDto.flightNo}}
            </p>
            <p class="flightDuration">
              {{['小型机','中型机','大型机'][toDetailDto.aircraftDto.type]}}
            </p>
            <p class="M3BackType" v-if="toDetailDto.mealType">
              <i class="iconfont icon-tangshi"></i>
            </p>
          </div>
        </div>
      </div>
      <div class="backbracking">
        <div class="L">
          <span class="icons-qu go">返</span>
          <span class="qu-type">{{backDetailDto.fromAirportName}}</span>
          <span>{{backMonth}}月{{backDay}}日</span>
        </div>
        <div class="M fix">
          <div class="M1 fix">
            <p class="M1GoDate">{{backStartTime}}</p>
            <p class="M1LineMiddle"></p>
            <p class="M1BackDate">{{backArriveTime}}</p>
          </div>
          <div class="M2 fix">
            <p class="M2GoCity">
              {{backDetailDto.fromAirportName}}
            </p>
            <p class="flightDuration">
              {{backDetailDto.flightDuration.split(':')[0]}}小时{{backDetailDto.flightDuration.split(':')[1]}}分钟
            </p>
            <p class="M2BackCity">
              {{backDetailDto.toAirportName}}
            </p>
          </div>
          <div class="M3 fix">
            <p class="M3GoType">
              {{backDetailDto.carrier.nameShort}}{{backDetailDto.flightNo}}
            </p>
            <p class="flightDuration">
              {{['小型机','中型机','大型机'][backDetailDto.aircraftDto.type]}}
            </p>
            <p class="M3BackType" v-if="backDetailDto.mealType">
              <i class="iconfont icon-tangshi"></i>
            </p>
          </div>
        </div>
      </div>
    </mt-popup>
    <!--出差申请-->
    <div class="title">
      <div class="label fix" @click="travelShow=true">
        <span class="labelT">出行类别</span>
        <p class="input ell" style="text-align: center;">{{travelTypes[0].itemTxt}}</p>
        <i class="iconfont icon-enter"></i>
      </div>
    </div>
    <!--费用归属-->
    <div class="title">
      <div class="label fix" @click="popupCostCenterVisible=true">
        <span class="labelT">费用归属</span>
        <p class="input ell" style="text-align: center;">{{handleCostSelectedVal.name}}</p>
        <i class="iconfont icon-enter"></i>
      </div>
    </div>
    <!--添加修改乘机人-->
    <div class="title">
      <div class="addP fix">
        <div class="addL">
          <h2>添加/修改乘机人</h2>
          <p>请确保姓名证件填写正确</p>
        </div>
        <div class="addR" @click="popupVisible4 = true">新增乘机人</div>
      </div>
      <div class="line"></div>
      <div class="PInfo fix" v-for="(passengerItem,index) in passengerAll" v-show="passengerItem.checked">
        <i @click="toggleCheck(passengerItem,index)"
           class="iconfont icon-shanchu3"></i>
        <span class="name ell">{{passengerItem.name}}</span> <span class="card">{{passengerItem.credentialName}}</span>
        <span class="cardID ell">{{passengerItem.credentialNo}}</span>
        <i class="iconfont icon-icon-1"
           @click="changePageModifyInfo(index)"></i>
      </div>
    </div>
    <!--保险-->
    <div class="title" v-if='insurance_show'>
      <div class="label fix" @click="open_insurance">
        <span class="labelT">保险</span>
        <p class="input ell" style="text-align: center;">{{iusurance_text}}</p>
        <i class="iconfont icon-enter"></i>
      </div>
    </div>
    <!--联系人-->
    <div class="contact">
      <div class="label fix">
        <span class="labelT">联系人</span>
        <input type="text" placeholder="请填写联系人姓名" class="input" v-model="contact.name" maxlength="8">
      </div>
      <div class="line"></div>
      <div class="label fix">
        <span class="labelT">手机号码</span>
        <input type="text" placeholder="请填写联系手机号" class="input" v-model.trim="contact.mobile" maxlength="11"/>
      </div>
      <div class="line"></div>
      <div class="label fix">
        <span class="labelT">邮箱账号</span>
        <input type="text" placeholder="请填写联系人邮箱" class="input" v-model="contact.email">
      </div>
      <div class="labelChange" @click="onShowPopupRule">
        <i data-v-183f10fd="" class="iconfont icon-guize"></i>
        退改签规则
      </div>
    </div>
    <div class="footer fix isFixed">
      <div class="footerL" @click="togglePrice">
        <div class="price">
          ￥ {{totalPrice+iusumoney_all}}
        </div>
        <div class="priceD">
          <span>明细</span> <i class="iconfont" :class="priceDetail ? 'icon-fold':'icon-unfold'"></i>
        </div>
      </div>
      <div @click="submit" class="footerR">
        去付款
      </div>
    </div>
    <!--退票规则弹框-->
    <div v-transfer-dom>
      <Popup v-model="popupQuitRulesVisible"  position="bottom" height="100%" style="background-color: #fff;">
        <flight-quit-rule @closePopupContent="closePopupContent"
                          refundMonmeyTitle="去程退票费"
                          changeMonmeyTitle="去程改期费"
                          :isShowBagTurn = true
                          :isShowBtn = false
                          :navList="navList"
                          :beforeRefundTime="beforeRefundTime"
                          :beforeRefundMoney="beforeRefundMoney"
                          :beforechangeMoney="beforechangeMoney"
                          :beforeRefundTime2="beforeRefundTime2"
                          :beforeRefundMoney2="beforeRefundMoney2"
                          :beforechangeMoney2="beforechangeMoney2"
                          :typeNum="typeNum"
                          :typeNum2="typeNum2"
                          :isTurnTicket="isTurnTicket"
                          :baggage="baggage"
                          :baggage2="baggage2"
                          :itemTimeOne="itemTimeOne"
                          :itemTimeTwo="itemTimeTwo"
                          :itemTimeThree="itemTimeThree"
                          :isShowTurnTwice = true
                          :salePrice="salePrice"></flight-quit-rule>
      </Popup>
    </div>
    <!--选择出差申请-->
    <mt-popup v-model="travelShow" position="bottom" class="travelPop">
      <div v-for="(pop,index) in expenseTravelType.travelTypes" class="popItem" :class="{activePop:pop.selected}"
           @click="popActive(index,1)">
        {{pop.itemTxt}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </mt-popup>
    <!--选择费用归属-->
    <mt-popup v-model="expenseShow" position="bottom" class="expensePop">
      <div v-for="(pop,index) in expenseTravelType.expenseTree" class="popItem" :class="{activePop:pop.selected}"
           @click="popActive(index,2)">
        {{pop.name}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </mt-popup>
    <!--选择乘机人-->
    <mt-popup v-model="popupVisible4" position="bottom" class="mint-popup-4 addPpopup">
      <div class="add fix">
        <div class="add1" @click="update">
          手动添加
        </div>
        <div class="add2" @click="addPerson">
          列表选择
        </div>
      </div>
      <div class="lineP"></div>
      <div class="peopleList">
        <div class="PInfo fix" v-for="(passengerItem,index) in passengers" @click="toggleCheck(passengerItem,index)">
          <span class="check iconfont" :class="{'icon-duihao':passengerItem.checked}"></span>
          <span class="name ell">{{passengerItem.name}}</span> <span
          class="card">{{passengerItem.credentialName}}</span>
          <span class="cardID ell">{{passengerItem.credentialNo}}</span> <i @click.stop="deletePassenger(index)"
                                                                            class="iconfont icon-right icon-shanchu3"></i>
        </div>
      </div>
    </mt-popup>
    <!--价格明细-->
    <mt-popup v-model="priceDetail" position="bottom" class="mint-popup-4 priceDetail">
      <div class="price fix">
        <p><span class="type adult">成人</span><span class="xian"></span> <span class="unit1">￥{{singlePrice}}</span>
          <span class="count">*{{passengerSelected.length}}人</span></p>
        <p><span class="type">去程票</span><span class="xian1"></span> <span class="unit">￥{{toDetailDto.flightPrice.salePrice}}</span>
        </p>
        <p><span class="type">返程票</span><span class="xian1"></span> <span class="unit">￥{{backDetailDto.flightPrice.salePrice}}</span>
        </p>
        <p><span class="type">机场建设费<span class="calculate">(共两程)</span></span> <span class="xian1"></span><span
          class="unit">￥{{(toDetailDto.flightPrice.departureTax || 0)+(backDetailDto.flightPrice.departureTax || 0)}}</span></p>
        <p><span class="type">燃油附加费<span class="calculate">(共两程)</span></span><span class="xian1 "></span><span
          class="unit xian2">￥{{(toDetailDto.flightPrice.fuelTax || 0)+(backDetailDto.flightPrice.fuelTax || 0)}}</span></p>
        <p><span class="type">服务费<span class="calculate">(共两程)</span></span><span class="xian1 "></span><span
          class="unit xian2">￥{{flightBack.serverCharge*2}}</span></p>
      </div>
      <div class="iusurance" v-if="iusurance_list.length>0">
        <div v-for="(item,index) in iusurance_list" class="iusu-list" v-if="item.allIusu>0">
          <p>{{item.name}}</p>
          <p class="copies">￥{{item.salePrice}}/份*{{item.allIusu}}</p>
        </div>
      </div>
    </mt-popup>
    <!--提示信息-->
    <confirmOne @confirmOneBtn="confirmOneBtn" :confirmOneInfo="confirmOneInfo" v-show="confirmOneShow"></confirmOne>
    <alert_nav v-show="alertError" class="hh">
      <div class="shouwan-alert">
        <div>
          <p>对不起!&nbsp;您所选的舱位异常</p>
          <p>请重新选择舱位</p>
        </div>
        <div class="alert-btn" @click="alertBtnClick">
          确定
        </div>
      </div>
    </alert_nav>
    <alert_nav v-show="alertShow" class="hh">
      <div class="shouwan-alert">
        <div>
          <p>对不起!&nbsp;您所选的舱位当前已售完</p>
          <p>请重新选择舱位</p>
        </div>
        <div class="alert-btn" @click="alertBtnClick">
          确定
        </div>
      </div>
    </alert_nav>
    <alert_nav v-show="alertShow1" class="ll">
      <div class="maneyChange">
        <div>
          <p>由于航空公司价格变动</p>
          <p>当前应付金额: <span style="color: #ce1b1b;">{{totalPrice}}</span></p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="cancelA">重新选择</div>
          <div class="money-a-success" @click="successA">继续预订</div>
        </div>
      </div>
    </alert_nav>
    <!--员工尚未设置职级-->
    <alert_nav v-show="staffRankShow">
      <div class="staffRankShow">
        <div class="staffRankIco"><i class="iconfont icon-gantanhao"></i></div>
        <div class="staffRankInfo">
          <p>该员工尚未设置职级</p>
          <p>请进行设置</p>
        </div>
        <div class="staffRankBtn" @click="staffRankClick">确定</div>
      </div>
    </alert_nav>
    <!--违规能创单-->
    <alert_nav v-show="alertIllegal1" class="ll">
      <div class="maneyChange">
        <div>
          <p>根据公司的差旅标准</p>
          <p><!--<span v-for="item in errName">{{item}}</span>-->本次预订违反了管控规则！</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="cancelA">重新预订</div>
          <div class="money-a-success" @click="goReason">继续</div>
        </div>
      </div>
    </alert_nav>
    <!--违规不能创单-->
    <alert_nav v-show="alertIllegal2" class="ll">
      <div class="maneyChange">
        <div>
          <p><span v-for="item in errName">{{item}}</span>超出差旅标准</p>
          <p>无法提交订单！</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="cancelA">重新预订</div>
          <div class="money-a-success" @click="orderConflict">取消</div>
        </div>
      </div>
    </alert_nav>
    <!--没有添加乘机人,前往保险页面的提示-->
    <alert_nav v-show="insurance_add" class="ll">
      <div class="maneyChange">
        <div>
          <p>您还没有添加乘机人!</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="insurance_add=false">返回</div>
          <div class="money-a-success" @click="open_insurance_click">添加</div>
        </div>
      </div>
    </alert_nav>
    <confirm v-show="confirmShow" :confirmInfoL="confirmInfoL" :confirmInfoR="confirmInfoR" @confirmBtnL="confirmBtnL"
             @confirmBtnR="confirmBtnR" :confirmInfo="confirmInfo"></confirm>
    <cost-to-attribution :visible.sync="popupCostCenterVisible"
                         @selected="costCenterFn"></cost-to-attribution>
  </div>
</template>
<script>
  import {Indicator, Toast} from 'mint-ui';
  import headNav from 'components/head.vue';
  import a_lert from 'components/alert.vue'
  import confirmOne from 'components/confirmOne.vue'
  import confirm from 'components/confirm.vue'
  import {copyArr, array_heavy, allDate} from 'src/libs/plan.js';
  import {weeks} from 'src/libs/data_conversion.js';
  import { Popup, TransferDomDirective as TransferDom} from 'vux'
  import flightQuitRule from '../../../components/flight/flight-quit-rule.vue'
  export default{
    data(){
      return {
        bookingRuleObj: this.$store.state.flightTo.detailDto.refundChangeDetail,
        bookingRuleObj2: this.$store.state.flightBack.detailDto.refundChangeDetail,
        itemTimeOne: '',
        itemTimeTwo: '',
        itemTimeThree: '',
        baggage: 20,
        baggage2: 20,
        isTurnTicket: '',
        typeNum: 1,
        typeNum2: 1,
        beforeRefundTime: [],
        beforeRefundMoney: [],
        beforechangeMoney: [],
        beforeRefundTime2: [],
        beforeRefundMoney2: [],
        beforechangeMoney2: [],
        popupQuitRulesVisible: false,
        navList: ['退改详情', '行李说明'],
        popupCostCenterVisible: false,
        popupCostCenterVisible: false,
        costAttributionSelected: [],
        confirmOneShow: false,
        confirmOneInfo: '',
        confirmInfoL: '重新选择航班',
        confirmInfoR: '重新选择舱位',
        backChangeShow: false,
        detailShow: false,
        titleBackType: '经济舱',
        popupVisible4: false,
        alertIllegal1: false,//违规能下单
        alertIllegal2: false,//违规不能下单
        travelShow: false,//出差申请
        expenseShow: false,//费用归属
        priceDetail: false,//价格明细
        alertError: false,
        alertShow: false, // 售完弹窗
        alertShow1: false,//价格变动弹窗
        staffRankShow: false, //员工尚未设置职级
        reasonForms: [],//往返程违规原因
        skipIllegalCheck: true,
        food: false,
        foodBack: false,
        flightType: '',
        orderId: "", /*返回的订单ID*/
        iusumoney_all: 0,
        insurance_add: false,
        //这两个后期要用
        isiusumonery: false,
        isiusumoneryalert: false,
        createOrderCode: '',
        confirmShow: false,
        confirmInfo: '',
        //保存往返程去程的数据
        togotime: '', //去出发的时间
        togettime: '', //去到达的时间
        toflyInfo: '',  //去时的机型信息

        toAirportName: '',//出发的机场name
        toport: '',  //去的机场名的后缀
        todestination: '',  //到达的目的地
        toneedTime: '', //去时所用的时
        toprice: '',//去时所用的价格
        toflightType: '',//去时的机型

        gomonth: '',//回来出发的月
        goday: '', //回来出发的日期
        gogotime: '', //回来出发的时间
        gogettime: '', //回来到达的时间
        goflyInfo: '',  //回来时的机型信息
        goWeek: '',//回来的星期几
        goAirportName: '',//回来出发的机场name
        goport: '',  //回来的机场名的后缀
        godestination: '',  //回来到达的目的地
        goneedTime: '', //回来时所用的时间
        goprice: '',//回来时所用的价格
        goflightType: '',//回来时的机型
        isShow: true,
        showNow1: true,
        showNow2: false,
      }
    },
    directives: {
      TransferDom
    },
    components: {
      headNav: headNav, alert_nav: a_lert, confirmOne: confirmOne, confirm: confirm,Popup, flightQuitRule
    },
    mounted(){

      this.$store.state.entryCode = 4;
      /*改变entryCode值*/
      this.$store.state.headNav.back = 'backflightListDetail';
      //进入页面就进行计算
      let list = this.$store.state.insurancedata.flight.flightinsurance;
      if (list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].allIusu) {
            this.iusumoney_all += list[i].salePrice * list[i].allIusu;
          }
        }
      } else {
        this.iusumoney_all = 0
      }
      if (this.$store.state.illegalReason) {
        this.$store.state.illegalReason = false;
        this.submit();
      }
    },
    methods: {
      closePopupContent() {
        this.popupQuitRulesVisible = false;
      },
      //拿到舱位退改详情信息,展示对应弹框
      onShowPopupRule() {
        let that = this;
        that.popupQuitRulesVisible = true;
        that.typeNum = that.bookingRuleObj.type;
        that.typeNum2 = that.bookingRuleObj2.type;
        if(that.typeNum == 1) {
          that.beforechangeMoney = that.bookingRuleObj.changeAmountList;
          that.beforeRefundTime = that.bookingRuleObj.headers;
          that.beforeRefundMoney = that.bookingRuleObj.refundAmountList;

          that.beforechangeMoney2 = that.bookingRuleObj2.changeAmountList;
          that.beforeRefundTime2 = that.bookingRuleObj2.headers;
          that.beforeRefundMoney2 = that.bookingRuleObj2.refundAmountList;

          that.isTurnTicket = that.bookingRuleObj.endorseRule;
        } else if(that.typeNum == 2) {
          that.beforechangeMoney = that.bookingRuleObj.changeAmountList.concat().splice(0, 1);
          that.beforeRefundTime = that.bookingRuleObj.headers.concat().splice(0, 1);
          that.beforeRefundMoney = that.bookingRuleObj.refundAmountList.concat().splice(0, 1);
          that.isTurnTicket = that.bookingRuleObj.endorseRule;
        } else if(that.typeNum == 3) {
          that.itemTimeOne = that.bookingRuleObj.headers[0];
          that.itemTimeTwo = that.bookingRuleObj.headers[1];
          that.itemTimeThree = that.bookingRuleObj.headers[2];
        }

        if(that.typeNum2 == 1) {

          that.beforechangeMoney2 = that.bookingRuleObj2.changeAmountList;
          that.beforeRefundTime2 = that.bookingRuleObj2.headers;
          that.beforeRefundMoney2 = that.bookingRuleObj2.refundAmountList;

          that.isTurnTicket = that.bookingRuleObj.endorseRule;
        } else if(that.typeNum2 == 2) {
          that.beforechangeMoney2 = that.bookingRuleObj2.changeAmountList.splice(0, 1);
          that.beforeRefundTime2 = that.bookingRuleObj2.headers.splice(0, 1);
          that.beforeRefundMoney2 = that.bookingRuleObj2.refundAmountList.splice(0, 1);
          that.isTurnTicket = that.bookingRuleObj2.endorseRule;
        } else if(that.typeNum2 == 3) {
          that.itemTimeOne = that.bookingRuleObj2.headers[0];
          that.itemTimeTwo = that.bookingRuleObj2.headers[1];
          that.itemTimeThree = that.bookingRuleObj2.headers[2];
        }
        that.baggage  = parseInt(that.bookingRuleObj.baggage.replace(/[^0-9]/ig,"") );
        that.baggage2  = parseInt(that.bookingRuleObj2.baggage.replace(/[^0-9]/ig,"") );
      },
      // 费用归属选中类型
      costCenterFn (item) {
        this.costAttributionSelected = item
      },
      changePageModifyInfo(index) {
        var currentPassenger = this.passengerAll[index];
        //如果当前的乘客信息里面没有当前的userId,则是手动添加的乘客
        // if(!currentPassenger.userId) {
        this.$router.push({
          name: 'addPassenger',
          query: {
            index: index
          }
        });
        // }
      },
      confirmBtnL(){
        var that = this;
        if (this.createOrderCode == '7') {
          this.$router.go(-2);//backflightList
        }

      },
      confirmBtnR(){
        var that = this;
        if (this.createOrderCode == '7') {
          this.$router.go(-1);
        }
      },
      open_insurance_click(){
        this.insurance_add = false;
        this.popupVisible4 = true;
      },
      open_insurance(){
        this.$store.state.headNav.back = 'returnbooking';
        let list = this.passengerSelected;

        if (list.length <= 0) {
          this.insurance_add = true;
        }
        else {
          for (let i = 0; i < list.length; i++) {
            if (list[i].iusuList) {
              list[i].iusuList = ''
            } else {
              list[i].iusuList = ''
            }
          }
          this.$router.push({
            name: 'insurance',
            query: {
              type: 1,
              code: 'flight',
              scene: 'rt',
            }
          })
        }
      },//打开添加保险页面
      book_reutrn_go(){
        //清空脏数据
        this.$store.state.insurancedata.flight.flightinsurance = [];
        for (let i = 0; i < this.$store.state.passengerSelected.length; i++) {
          if (this.$store.state.passengerSelected[i].iusuList) {
            delete this.$store.state.passengerSelected[i].iusuList;//删除对象中的属性,但是不能删除变量
          }
        }
        this.$router.go(-1);
      },//反回按钮
      confirmOneBtn(){
        this.confirmOneShow = false
      },
      staffRankClick(){
        this.$router.push({
          name: 'setStaffRank'
        })
      },//      员工尚未设置职级
      goReason(){
        this.alertIllegal1 = false;
        this.$router.push({
          name: 'backillegalReason'//createby yj
        })
      }, /*进入违规原因记录*/
      orderConflict(){
        this.alertIllegal2 = false;
      }, /*订单冲突弹窗按钮*/
      addPerson(){

        this.popupVisible4 = false;

        var that = this;
        //           执行加载动画
        that.$vux.loading.show({
          text: '加载中...'
        })

        //增加乘机人 列表选择 从部门列表中选择拿到数据
        that.$flight.flightGetPersonalInfo({
          Id: ''
        }, (res) => {
          that.$vux.loading.hide();
          that.$store.state.staffList.res = res;
          that.$router.push({
            name: 'staffList',
            params: {}
          });
        }, (err) => {
          that.$vux.loading.hide();
        });


      },//增加乘机人  列表选择
      cancelA(){
        this.alertShow1 = false;
        this.$router.go(-4);``
      },//价格变动弹窗  取消按钮
      successA(){
        var footer = document.querySelector('.footer');
        footer.style.zIndex = 99;
        this.alertShow1 = false;
        //todo 将改变后的价格赋值到当前
        this.submit();
      },//价格变动弹窗  确认按钮
      alertBtnClick(){
        this.alertShow = false;
        this.$router.go(-4);
      },//售完弹窗按钮
      deleteDate(){
        var passengerSelected = this.$store.state.passengerSelected;
        for (var i = 0; i < passengerSelected.length; i++) {
          delete passengerSelected[i].iusuList;
        }
        this.$store.state.passengerSelected = [];
      },
      submit () {
        this.priceDetail = false;
        if (this.passengerSelected.length > 9) {
          this.confirmOneShow = true;
          this.confirmOneInfo = '最多选择9位乘机人';
          return;
        } else if (this.contact.mobile.checkPhone() == false) {
          that.$vux.toast.show({
            type: 'text',
            text: '手机号有误',
            time: 2000
          })
          return
        } else if (this.contact.email) {
          if (this.contact.email.checkEmail() == fatolse) {
            that.$vux.toast.show({
              type: 'text',
              text: '邮箱有误',
              time: 2000
            })
            return
          }
        }

        var passengerSelected = [];
        var that = this;
        for (var p = 0; p < this.passengerSelected.length; p++) {
          var ob = {};
          ob.name = this.passengerSelected[p].name;
          ob.userId = this.passengerSelected[p].userId;
          ob.credentialType = this.passengerSelected[p].credentialType;//证件类型
          ob.credentialNo = this.passengerSelected[p].credentialNo;//证件号
          ob.birthday = this.passengerSelected[p].birthday;//出身日期
          ob.gender = this.passengerSelected[p].sexType;//性别


          ob.costUnitCode = this.handleCostSelectedVal.costUnitCode;//成本中心code(费用归属里取)
          ob.orgId = this.handleCostSelectedVal.orgId;//组织ID(费用归属里取)
          ob.corporationId = this.handleCostSelectedVal.corporationId;//法人ID(费用归属里取)


          ob.travellerType = this.passengerSelected[p].travellerType;//乘客类型(员工非员工)

          ob.empLevelCode = this.passengerSelected[p].empLevelCode;//职级code
          ob.isPassEmpLevel = this.passengerSelected[p].isPassEmpLevel;//职级是否通过审核


          ob.passengerType = this.passengerSelected[p].passengerType;//成人儿童
          ob.appIsChecked = this.passengerSelected[p].checked;

          //保险的字段
          ob.insuranceIds = this.passengerSelected[p].iusuList || [];
          passengerSelected.push(ob)
        }


        var orderForm = {};

        orderForm.contactorDto = this.contact;//联系人
        orderForm.passengerShow = passengerSelected;//乘机人

        orderForm.travelTypesForm = this.travelTypes[0];//差旅类型
        orderForm.expenseShow = this.expenseTree[0];
        orderForm.reasonForms = this.reasonForms;//往返程违规原因

        orderForm.searchDto = that.$store.state.flightBack.searchDto || {}; //往返程searchDto 放在返程里
        orderForm.searchDto.checkPriceRouteRuleItemId = that.$store.state.flightTo.searchDto.checkPriceRouteRuleItemId;

        orderForm.searchDto.agreementPolicyId = that.$store.state.flightTo.searchDto.agreementPolicyId;
        orderForm.searchDto.productType = that.$store.state.flightTo.searchDto.productType;
        orderForm.searchDto.otherAgreementPolicyId = that.$store.state.flightBack.searchDto.agreementPolicyId;
        orderForm.searchDto.otherProductType = that.$store.state.flightBack.searchDto.productType;

        orderForm.illegalReasonList = that.$store.state.illegalReasonListFB;
        orderForm.skipIllegalCheck = that.$store.state.skipIllegalCheck;


        if (orderForm.passengerShow.length === 0) {
          that.$vux.toast.show({
            type: 'text',
            text: '请添加乘机人',
            time: 2000
          })
        } else if (orderForm.contactorDto.name === '') {
          that.$vux.toast.show({
            type: 'text',
            text: '请填写联系人姓名',
            time: 2000
          })
        } else if (orderForm.contactorDto.mobile === '' && orderForm.contactorDto.email === '') {
          that.$vux.toast.show({
            type: 'text',
            text: '联系人手机和邮箱至少填写一项',
            time: 2000
          })
        } else {
          that.$vux.loading.show({
            text: '加载中...'
          })
          // 创建订单接口
          that.$flight.flightReturnCreatedOrder({
            "orderForm1": JSON.stringify(orderForm)
          }, (data) => {
            that.$vux.loading.hide();
            var code = data.response.code || '';
            switch (code) {
              case '0':
                that.$router.push({
                  name: 'pay',
                  query:{
                    orderId:data.orderId
                  }
                });
                that.$store.state.pay.back = 'returnbooking';
                for (var i = 0; i < that.$store.state.passengers.length; i++) {
                  that.$store.state.passengers[i].checked = false;
                }
                that.$store.state.illegalReasonListFB = [];
                that.$store.state.skipIllegalCheck = false;

                that.deleteDate();

                break;
              case '1':
                that.alertShow = true;
                break;
              case '-1':
                that.alertError = true;
                break;
              case '5':
                /*重复订单*/
                that.confirmOneInfo = data.response.msg;
                that.confirmOneShow = true;
                break;
              case '7':
                that.createOrderCode = '7';
                that.confirmInfo = data.response.msg;
                that.confirmShow = true;
                break;
              case '005':
                /*未设置职级*/
                that.$store.state.staffList = ''
                ;
                that.staffRankShow = true;
                break;
              case '006':
                /*无法创建订单*/
                that.alertIllegal2 = true
                ;
                break;
              case '007':
                /*超出标准需要理由*/
                that.$store.state.backillegalData = data.response.data;//展示的违规人员信息

                that.$router.push(
                  {
                    name: 'backillegalReason'
                  })
                break;
              case '008':
                /*未提前预订需要理由*/
                that.$store.state.backillegalData = data.response.data;

                that.$vux.loading.hide();
                that.$router.push({
                  name: 'backillegalReason'
                })
                break;
              case '009':
                /*未提前预订并且超出标准需要理由*/
                that.$store.state.backillegalData = data.response.data;


                that.$vux.loading.hide();
                that.$router.push({
                    name: 'backillegalReason'
                  }
                )
                break;
              case '010':
                /*未提前预订并且超出标准不需要理由*/
                that.$store.state.backillegalData = data.response.data;
                that.$vux.loading.hide();
                that.$router.push({
                  name: 'backillegalReason'
                })
                break;
              default:
                that.$vux.loading.hide();
                break;
            }
            that.$vux.loading.hide();
          }, (err) => {
            that.$vux.loading.hide();
          })
        }
      }, /*提交订单*/
      toggleCheck(passenger, index){
        let list = this.$store.state.insurancedata.flight.flightinsurance;
        if (list.length > 0) {
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < list[i].user_inus.length; j++) {
              if (list[i].user_inus[j].userId == passenger.userId) {
                list[i].user_inus.splice(j, 1);
              }
            }
          }
          for (let i = 0; i < list.length; i++) {
            list[i].allIusu = 0;
            for (let j = 0; j < list[i].user_inus.length; j++) {
              if (list[i].user_inus[j].flightInsu != '') {
                list[i].allIusu++;
              }
            }
          }
          //重新计算价格
          this.iusumoney_all = 0
          for (let i = 0; i < list.length; i++) {
            if (list[i].allIusu) {
              this.iusumoney_all += list[i].salePrice * list[i].allIusu;
            }
          }
        }
        //删除时要清空
        if (passenger.iusuList && passenger.checked == true) {
          delete this.$store.state.passengers[index].iusuList
        }
        //从新计算一下
        return passenger.checked = !passenger.checked
      },
      deletePassenger(passenger){
        this.$store.commit('DELETE_PASSENGER', passenger)
      },
      togglePrice(){
        var footer = document.querySelector('.footer');
        footer.style.zIndex = 2500;
        return this.priceDetail = !this.priceDetail
      },
      update(){
        this.$router.push({
          name: 'addPassenger'
        });
      }, /*请求证件类型与常用旅客列表*/
      popActive(index, type){
        switch (type) {
          case 1://出差申请
            for (var i = 0; i < this.expenseTravelType.travelTypes.length; i++) {
              this.expenseTravelType.travelTypes[i].selected = false;
            }
            this.expenseTravelType.travelTypes[index].selected = true;
            this.travelShow = false;
            break;
          case 2://费用归属
            for (var k = 0; k < this.expenseTravelType.expenseTree.length; k++) {
              this.expenseTravelType.expenseTree[k].selected = false;
            }
            this.expenseTravelType.expenseTree[index].selected = true;
            this.expenseShow = false;
            this.$store.state.flight.peopleMsg.costUnitCode = this.expenseTravelType.expenseTree[index].code;
            this.$store.state.flight.peopleMsg.orgId = this.expenseTravelType.expenseTree[index].orgId;
            this.$store.state.flight.peopleMsg.corporationId = this.expenseTravelType.expenseTree[index].corpId;
            break;
        }
      },
    },
    computed: {
      // 处理费用归属选中后的值
      handleCostSelectedVal () {
        // 如果状态机中有选中的成本中心，则返回
        let cost_selected = this.$store.state.common.cost_selected
        if (this.costAttributionSelected.length < 1) {
          if (cost_selected.length > 0) {
            return cost_selected[cost_selected.length - 1]
          }
          let curCostId = this.$store.state.common.attribution_data.curCostId

          if (curCostId) {
            let cost = this.$store.state.common.cost_attribution.filter(item => {
              return item.costUnitCode === curCostId
            })
            return cost.length > 0 ? cost[0] : cost
          }
          return {
            name: ''
          }
        }
        return this.costAttributionSelected[this.costAttributionSelected.length - 1]
      },
      flightTo(){
        return this.$store.state.flightTo
      },
      flightBack(){
        return this.$store.state.flightBack
      },
      toDetailDto(){
        return this.flightTo.detailDto
      },
      toMonth(){
        return this.toDetailDto.fromDate.cuoChangeTime('month');
      },
      toDay(){
        return this.toDetailDto.fromDate.cuoChangeTime('day');
      },
      toWeek(){
        return this.toDetailDto.fromDate.weekGet();
      },
      toStartTime(){
        return this.toDetailDto.fromDate.cuoChangeTime('hours') + ':' + this.toDetailDto.fromDate.cuoChangeTime('minutes');
      },
      toArriveTime(){
        return this.toDetailDto.toDate.cuoChangeTime('hours') + ':' + this.toDetailDto.toDate.cuoChangeTime('minutes');
      },
      backDetailDto(){
        return this.flightBack.detailDto
      },
      backMonth(){
        return this.backDetailDto.fromDate.cuoChangeTime('month');
      },
      backDay(){
        return this.backDetailDto.fromDate.cuoChangeTime('day');
      },
      backWeek(){
        return this.backDetailDto.fromDate.weekGet();
      },
      backStartTime(){
        return this.backDetailDto.fromDate.cuoChangeTime('hours') + ':' + this.backDetailDto.fromDate.cuoChangeTime('minutes');
      },
      backArriveTime() {
        return this.backDetailDto.toDate.cuoChangeTime('hours') + ':' + this.backDetailDto.toDate.cuoChangeTime('minutes');
      },
      recentPassengerList(){
        return this.$store.state.recentPassengerList
      }, /*上次订单乘机人*/
      passengerSelected(){
        this.$store.state.passengerSelected = this.$store.state.passengers.jsonRepeat('credentialNo').filter(todo => todo.checked)
        return this.$store.state.passengerSelected
      },
      passengerAll(){
        return this.$store.state.passengers
      },
      passengers(){
        return this.$store.state.passengers
      },
      index(){
        return this.$store.state.flight.index
      },
      toCabinIndex(){
        return this.$store.state.flight.toCabinIndex
      },
      totalPrice(){
        var n = this.passengerSelected.length ? this.passengerSelected.length : 1;

        var total = this.singlePrice * n;
        return total
      },
      singlePrice(){
        var toSalePrice = this.toDetailDto.flightPrice.salePrice;//去程机票的价格
        var toDepartureTax = this.toDetailDto.flightPrice.departureTax || 0;//去的机场建设费
        var toFuelTax = this.toDetailDto.flightPrice.fuelTax || 0;//去的燃油附加费

        var backSalePrice = this.backDetailDto.flightPrice.salePrice;//去程机票的价格
        var backDepartureTax = this.backDetailDto.flightPrice.departureTax || 0;//去的机场建设费
        var backFuelTax = this.backDetailDto.flightPrice.fuelTax || 0;//去的燃油附加费

        var serverCharge = this.flightBack.serverCharge * 2;

        var singlePrice = toSalePrice + toDepartureTax + toFuelTax + backSalePrice + backDepartureTax + backFuelTax + serverCharge;

        return singlePrice
      },
      expenseTravelType(){
        return this.$store.state.expenseTravelType
      },
      travelTypes(){
        var ob = this.$store.state.expenseTravelType.travelTypes.filter(todo => todo.selected);
        return ob//这个是一个数组
      },//筛选出选中的出差申请
      expenseTree(){
        var ob = this.$store.state.expenseTravelType.expenseTree.filter(todo => todo.selected);
        return ob//这个是一个数组
      },//筛选出选中的费用归属
      contact(){
        return this.$store.state.contact
      },
      entryCode(){
        return this.$store.state.entryCode
      },
      insurance_show(){
        return this.$store.state.insurancedata.flight.Insurance
      }, //保险模块
      iusurance_text(){
        let text = [];
        if (this.$store.state.passengerSelected.length <= 0) {
          this.$store.state.insurancedata.flight.flightinsurance = [];
        }
        let list = this.$store.state.insurancedata.flight.flightinsurance;

        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < list[i].user_inus.length; j++) {
            if (list[i].user_inus[j].flightInsu !== '' && list[i].user_inus[j].flightInsu !== undefined) {
              text.push(list[i].name);
            }
          }
        }
        text = array_heavy(text).join(',');
        return text.length <= 0 ? '请选择保险' : text;
      },
      iusurance_list(){
        let list = this.$store.state.insurancedata.flight.flightinsurance;
        return list;
      }, //保险选择列表
      toEndorseAndRefundRule(){
        var rules = this.flightTo.detailDto.flightPrice.endorseAndRefundRule;
        return rules && rules.length > 0 ? rules[0] : {};
      },
      backEndorseAndRefundRule(){
        var rules = this.flightBack.detailDto.flightPrice.endorseAndRefundRule;
        return rules && rules.length > 0 ? rules[0] : {};
      },
      noRuleTip(){
          return this.$store.state.noRuleTip;
      }

    }
  }

</script>

<!--员工尚未设置职级-->
<style scoped>
  .staffRankShow {
    width: 12.5rem;
    text-align: center;
    font-size: .75rem;
  }
  .staffRankIco {
    margin: .375rem 0 .5rem 0;
  }
  .staffRankInfo {
    line-height: 1rem;
  }

  .staffRankBtn {
    color: #46a1bb;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    margin-top: .5rem;
    font-size: .9rem;
  }

  .icon-gantanhao {
    color: #46a1bb;
  }
</style>

<!--售完弹窗-->
<style scoped>

  .shouwan-alert {
    width: 15rem;
    /*height: 300px;*/
    margin-top: 1.25rem;
    font-size: .8rem;
  }

  .shouwan-alert p {
    margin-bottom: 1rem;
    font-size: .8rem;
  }

  .alert-btn {
    color: #46a1bb;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
  }

</style>
<!--价格变动弹窗-->
<style scoped>
  .maneyChange {
    width: 15rem;
    /*height: 300px;*/
    margin-top: 1.25rem;
    font-size: .8rem;
  }

  .maneyChange p {
    margin-bottom: 1rem;
    font-size: .8rem;
  }

  .maneyChange .money-a-btn {
    color: #46a1bb;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
  }

  .money-a-cancel {
    float: left;
    width: 50%;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
  }

  .money-a-success {
    float: right;
    width: 50%;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mint-indicator-mask {
    z-index: 999999998;
  }

  .mint-indicator-wrapper {
    z-index: 999999999;
  }

  .changePop {
    width: 92%;
    margin: 0 auto 8.75rem;
    height: auto;
    overflow: scroll;
    .changeTitle {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333333;
      font-size: .75rem;
      border-bottom: 1px solid #bbbbbb;
    }
    .goExplain {
      display: inline-block;
      width: 40%;
      height: 98%;
      text-align: center;
    }

    .showNow1 {
      color: #46a1bb;
    }
    .changeItem {
      padding: .5rem;
      .changeType {
        font-size: .65rem;
        width: 5rem;
        text-align: left;
        color: #666666;
        line-height: 1.3;
      }
      .changeTxt {
        font-size: .7rem;
        width: 100%;
        padding: 0 .5rem 0 0;
        line-height: 1.3;
      }
    }

  }

  .page {
    height: 100%;
    background-color: #f0f0f0;
    padding: 2.2rem 0 2.5rem 0;
    box-sizing: border-box;
    overflow: auto;
  }

  .popItem {
    line-height: 2.5rem;
    width: 100%;
    border-bottom: 1px solid #ddd;
    font-size: .75rem;
    box-sizing: border-box;
    padding: 0 1.2rem;
  }

  .icon-duihao {
    font-size: .9rem;
  }

  .travelPop, .expensePop {
    width: 100%;
    max-height: 15rem;
    overflow: auto;
    z-index: 3000 !important;
  }

  .activePop {
    color: #0994db;
  }
  .addP {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 3.25rem;
    padding: .9rem .5rem 0 .5rem;
  }

  .addL {
    position: relative;
    float: left;
    text-align: left;
    h2 {
      font-size: .75rem;
      color: #333333;
      margin-bottom: .25rem;
    }
    p {
      font-size: .55rem;
      color: #999999;
    }
  }

  .addR {
    text-align: center;
    position: relative;
    float: right;
    border-radius: .125rem;
    font-size: .75rem;
    color: white;
    background-color: #46a1bb;
    width: 4.65rem;
    height: 1.6rem;
    line-height: 1.6rem;
  }

  .line {
    height: 1px;
    width: 92%;
    margin: 1px auto;
  }

  .lineP {
    height: 1px;
    background-color: #999999;

  }

  .peopleList {
    max-height: 15rem;
    overflow: auto;
  }

  .peopleList i.icon-right {
    left: auto !important;
    right: .5rem !important;
  }

  .PInfo {
    display: flex;
    position: relative;
    padding: 0 .5rem;
    font-size: 0;
    text-align: left;
    border-bottom: 1px solid #999999;
    .name {
      margin-left: 1rem;
      height: 3rem;
      font-size: .75rem;
      display: block;
      float: left;
      line-height: 3rem;
      width: 3.5rem;
    }
    .card {
      height: 3rem;
      font-size: .75rem;
      display: block;
      float: left;
      line-height: 3rem;
      width: 4rem;
      vertical-align: top;
    }
    .cardID {
      height: 3rem;
      font-size: .75rem;
      display: inline-block;
      line-height: 3rem;
      width: 7rem;
    }
    i.icon-shanchu3 {
      display: inline-block;
      position: absolute;
      left: .5rem;
      height: 3rem;
      line-height: 3rem;
      font-size: .75rem;
      color: #ce1b1b;
    }
    i.icon-icon-1 {
      padding: 0 .5rem 0 1rem;
      display: inline-block;
      position: absolute;
      right: 0;
      height: 3rem;
      line-height: 3rem;
      font-size: 1.5rem;
      color: #46a1bb;
    }
    .check {
      display: inline-block;
      float: left;
      vertical-align: top;
      font-size: .8rem;
      width: .8rem;
      height: .8rem;
      border: 1px solid #999999;
      margin: 1.05rem .25rem 0 0;
      border-radius: 0;
    }
    .icon-duihao {
      color: #46a1bb;
    }
  }

  .contact {
    margin: 0 .25rem .5rem .25rem;
    border-radius: .125rem;
  }

  .addPpopup {
    min-height: 20rem;
    width: 100%;
    background-color: white;
    z-index: 3000 !important;
    .titleP {
      box-sizing: border-box;
      padding: 0 .6rem;
      /*background-color: #999999;*/
      font-size: .8rem;
      color: #333333;
      .cancel {
        position: relative;
        float: left;
        height: 2.35rem;
        line-height: 2.35rem;
      }
      .sure {
        position: relative;
        float: right;
        height: 2.35rem;
        line-height: 2.35rem;
      }
    }
    .add {
      box-sizing: border-box;
      position: relative;
      margin: .5rem 0 1rem 0;
      padding: 0 .6rem;
      font-size: .75rem;
      color: white;
      .add1 {
        background-color: #46a1bb;
        position: relative;
        float: left;
        text-align: center;
        height: 2.1rem;
        line-height: 2.1rem;
        width: 48%;
        border-radius: .125rem;
      }
      .add2 {
        background-color: #46a1bb;
        position: relative;
        float: right;
        text-align: center;
        height: 2.1rem;
        line-height: 2.1rem;
        width: 48%;
        border-radius: .125rem;
      }
    }
  }

  .priceDetail {
    /*z-index: 100!important;*/
    padding-bottom: 2.5rem;
    width: 100%;
    .space {
      height: 2.5rem;
      line-height: 2.5rem;
      padding: 0 .5rem;
      /*text-align: center;*/
      color: #333333;
      font-size: .75rem;
      font-weight: bold;
      .cangwei {
        margin-left: .25rem;
      }
    }
    .price, .insurance {
      padding: .5rem .5rem 0 .5rem;
      p {
        margin-bottom: .5rem;
        /*height: 2rem;*/
        /*line-height: 2rem;*/
        .type {
          color: #333333;
          font-size: .75rem;
          width: 6.25rem;
          display: inline-block;
        }
        .adult {
          width: 2.5rem;
        }
        .unit {
          color: #ce1b1b;
          font-size: .75rem;
          display: inline-block;
          width: 150px;
        }
        .unit1 {
          color: #ce1b1b;
          font-size: .75rem;
          width: 2.5rem;
          display: inline-block;
        }
        .count {
          color: #ce1b1b;
          font-size: .75rem;
        }
      }
    }
    .insurance {

    }
  }

  .labelChange {
    background-color: #fff;
    padding: 0 .75rem;
    font-size: .75rem;
    text-align: right;
    height: 2rem;
    line-height: 2rem;
    color: #46a1bb;
    margin-top: .25rem;
  }

  /*label*/
  .label {
    text-align: left;
    background-color: white;
    padding: 0 .5rem;
    font-size: 0;
    position: relative;
    span {
      display: block;
      font-size: .75rem;
      width: 3.5rem;
      height: 2.65rem;
      line-height: 2.65rem;
      color: #333333;
      float: left;
    }
    .input {
      display: block;
      width: 9.5rem;
      font-size: .75rem;
      border: none;
      height: 2.65rem;
      float: left;
      line-height: 2.65rem;
    }
    i {
      position: absolute;
      right: .5rem;
      font-size: .8rem;
      color: #46a1bb;
      height: 2.65rem;
      line-height: 2.65rem;
    }
    div {
      position: relative;
      display: inline-block;
    }
  }

  .accountPay {
    font-size: .75rem;
    color: #333333;
    display: inline-block;
    height: 2.65rem;
    line-height: 2.65rem;
  }

  input.accountI {
    position: absolute;
    right: .5rem;
    top: .85rem;
    font-size: .8rem;
    width: .8rem;
    height: .8rem;
    border: 1px solid #999999;
    margin: 0;
    border-radius: 0;
  }

  .footer {
    width: 100%;
    z-index: 1;
    .footerL {
      background-color: white;
      width: 50%;
      position: relative;
      float: left;
      box-sizing: border-box;
      padding: 0 1rem;
      .price {
        position: relative;
        float: left;
        color: #ce1b1b;
        font-size: .85rem;
        height: 2.5rem;
        line-height: 2.5rem;
      }
      .priceD {
        position: relative;
        float: right;
        font-size: .55rem;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #999999;
      }
      .icon-unfold {
        vertical-align: sub;
      }

    }
    .footerR {
      width: 50%;
      position: relative;
      float: left;
      color: white;
      font-size: .9rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      background-color: #46a1bb;
    }
  }

  /*title*/
  .title {
    text-align: center;
    background-color: #fff;
    width: 97.33%;
    margin: 0 .25rem .25rem .25rem;
    border-radius: .125rem;
  }

  .title1 {
    text-align: center;
    background-color: #fff;
    width: 97.33%;
    margin: 0 .25rem .25rem .25rem;
    border-radius: .125rem;
    padding: .65rem 0 .5rem 0;
    /* padding: .65rem 0 .5rem .5rem;*/
  }

  .left {
    float: left;
    width: 88%;
  }

  .icons-qu {
    background-color: #0c80ba;
    padding: .1rem;
    border-radius: .05rem;
    color: #FFFFFF;
  }

  .titleDate {
    /* font-size: .75rem; !*px*!*/
    font-size: .6rem;
    text-align: left;
    margin-left: .5rem;
    width: 6.5rem;
    float: left;
  }

  .title1 {
    line-height: 1.5rem;
    font-size: 1.15rem;
  }

  .title1 p {
    float: left;
  }

  .titleT {
    /* padding-top: .65rem;*/
    width: 9rem;
    float: left;
    font-size: .6rem;
  }

  .title2 {
    float: left;
    font-size: .6rem;
  }
  .right {
    font-size: .6rem;
    float: right;
    width: 1.75rem;
    padding-top: 1rem;
    color: #46a1bb;
  }
  .changePop2 {
    width: 100%;
    margin: 0 auto;
    /*height: 4.5rem;*/
    font-size: .6rem;
    padding: .5rem;
    z-index:3000!important;
  }

  .outward {
    padding-bottom: .5rem;
    width: 100%;
    border-bottom: 1px solid #bbbbbb;
  }

  .L {
    margin-left: 1rem;
    height: 1rem;
    line-height: 1rem;
  }

  .L span {
    font-size: .75rem;
    display: inline-block;
  }

  .qu-type {
    width: 5.75rem;
  }

  .M1 {
    line-height: 1.5rem;
    font-size: 1.15rem;
    text-align: center;
    margin-left: .5rem;
  }

  .M1GoDate {
    width: 4.5rem;
    float: left;
    margin-left: .5rem;
  }

  .M1LineMiddle {
    width: 6.25rem;
    height: 1.5rem;
    float: left;
    background: url("../../../assets/images/goBackLine.png") no-repeat center;
  }

  .M1BackDate {
    float: left;
    width: 4.5rem;
    margin-right: 1rem;
  }

  .M2 {
    font-size: .6rem;
    margin-top: .25rem;
    margin-left: .5rem;
  }

  .M2GoCity {
    width: 4.5rem;
    float: left;
    margin-left: .5rem;
  }

  .M2BackCity {
    float: left;
    width: 4.5rem;
    margin-right: 1rem;
    text-align: center;
  }

  .flightDuration {
    margin: 0 1.25rem;
    width: 4rem;
    float: left;
    text-align: center;
  }

  .M3 {
    font-size: .6rem;
    margin-top: .25rem;
    margin-left: .5rem;
  }

  .M3GoType {
    width: 5rem;
    float: left;
    margin-left: .5rem;
  }

  .M3BackType {
    text-align: center;
    float: right;
    width: 4rem;
    margin-right: 1rem;
  }

  .backbracking {
    margin-top: .5rem;
  }

  .titleGoDate {
    width: 4.5rem;
    margin-left: 1.5rem;
  }

  .titleBackDate {
    width: 4.5rem;
    margin-right: 1.5rem;
  }

  .titleLineMiddle {
    width: 6.25rem;
    height: 1.5rem;
    background: url("../../../assets/images/goBackLine.png") no-repeat center;
  }

  .titleGoCity {
    width: 6.5rem;
    float: left;
    margin-left: .5rem;
  }

  .titleBackCity {
    width: 6.5rem;
    float: right;
    margin-right: .5rem;
  }

  .titleGoType {
    width: 7rem;
    float: left;
    margin-left: .25rem;
  }

  .titleLineInfo {
    float: left;
    width: 3.75rem;
  }

  .titleBackType {
    width: 7rem;
    float: right;
    margin-right: .25rem;
  }

  .iusurance {
    font-size: .75rem;
    border-top: 1px solid #d4d4d4;
    padding: 0 .5rem;
  }

  .iusu-heda {
    line-height: 2rem;
  }

  .iusu-list {
    line-height: 2rem;
    display: flex;
  }

  .iusu-list p {
    flex: 1;
  }

  .iusu-list p:last-child {
    text-align: center;
    color: #ce1b1b;
  }

  .xian {
    display: inline-block;
    width: 9.875rem;
    height: .25rem;
    border-bottom: .1rem dashed #D3D3D3;
  }

  .xian1 {
    display: inline-block;
    width: 6.25rem;
    height: .25rem;
  }

  .xian2 {
    padding-left: .625rem;
  }

  .calculate {
    font-size: .5rem;
  }

  .copies {
    text-indent: 3rem;
  }
</style>
